<template>
	<section>
		<!--工具条-->
	    <el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
	      <el-form :inline="true" :model="filters">
	        <el-form-item>
	          <el-input v-model="filters.search" placeholder="文章ID"></el-input>
	        </el-form-item>
	        <el-form-item>
	          <el-button type="primary" v-on:click="">查询</el-button>
	        </el-form-item>
	        <el-form-item>
	          <el-button type="primary" @click="addArticle">新增</el-button>
	        </el-form-item>
	      </el-form>
	    </el-col>

	    <!--列表-->
	    <template>
	      <el-table :data="articleList" highlight-current-row v-loading="loading" style="text-align: center;">
	        <el-table-column header-align="center"  prop="articleId" label="文章ID"  width="120">
	        </el-table-column>
	        <el-table-column header-align="center" prop="title" label="文章标题">
	        </el-table-column>
	        <el-table-column header-align="center" prop="authorName" label="作者" width="300" >
	        </el-table-column>
	        <el-table-column header-align="center" prop="articleType" label="文章类型" width="100" >
	        </el-table-column>
	        <el-table-column header-align="center" label="操作" width="200">
	        <template scope="scope">
	          <el-button size="small" @click="viewParticulars(scope.$index, scope.row)">查看详情</el-button>
	          <el-button size="small" @click="editArticle(scope.$index, scope.row)">编辑文章</el-button>
	        </template>
	      </el-table-column>
	      </el-table>
	    </template>
	      <!--工具条-->
	      <el-col :span="24" class="toolbar">
	      <Page style='display: inline-block; float: left;' :total="total" :page-size='num' @on-change='pagepagin' show-elevator></Page>
	      <div style='display: inline-block;float: left;margin-left: 200px' class="all">总计<span class="total">{{total}}</span>条记录</div>
	    </el-col>
	</section>
</template>
<script>
 import util from '../../common/js/util'
  import { sendDataPost } from "../../api/api";
	export default{
		data(){
			return{
				filters: {
		          search: ''
		        },
		        loading: false,
		        articleList: [],
		        total: 0,
		        page: 1,
		        num:20
				}
		},
		components:{
			
		},
		methods:{
			 getUser: function () {
		        let para = this.filters.search;
		          if (para!==""&&isNaN(para)) {
		             this.$message({
		              message: "请输入正确的鉴赏ID",
		              type: "error"
		            });
		          return
		          }
		        let page=JSON.parse(this.page);
		        let params=sendDataPost({url: "article/list",msg: {search:para,pgNo:page,num:this.num,order:2,status: 1}})
		        this.loading = true;
		        var formatdata=JSON.stringify(params.params)
		        this.$http.post(params.baseURL,formatdata).then(res=>{
		          var res=JSON.parse(res.bodyText)
		          res.msg.rows.forEach(function(v,i){
		          	v.articleType=v.articleType==1?"图文":"视频"
		          })
		          this.articleList=res.msg.rows
		          if (res.msg.total>1) {
		          	sessionStorage.setItem('total', res.msg.total)
		          	this.total=JSON.parse(sessionStorage.getItem('total'))
		          }
		          this.loading = false;
		        })

		    },
		    // 请求分页
		    pagepagin(val) {
		        this.total=JSON.parse(sessionStorage.getItem('total'))
		        this.page = val;
		        this.getUser()
		      },
		    // 新增文章
		    addArticle(){
		    		this.$router.push({  
			            path: '/addArticle',   
			            name: '新增文章',    
			        })

		    },
		    // 查看详情
		    viewParticulars(index,row){
		    	window.open("./static/preview/previewArticle.html?id="+row.articleId)
		    },
		    // 编辑文章
		    editArticle(index,row){
		    	this.$router.push({  
			            path: '/editArticle',   
			            name: '编辑文章',  
			            params:{
			            	id:row.articleId
			            }  
			        })
		    },
		},
		watch:{
			"page":function(){
				this.getUser()	
				console.log(this.page)
			}
		},
		mounted(){
			this.getUser()
		}
	}
</script>
<style scoped>
	
</style>